<template>
  <div class="header d-flex justify-space-between items-center">
    <div class="header-left d-flex items-center">
      <div class="logoBox d-flex items-center fs-22 pl-22">
        <img class="logoImg mr-5" src="https://picsum.photos/id/69/50/50" alt /> 运营中心
      </div>
      <ul class="navBox d-flex relative">
        <span class="bottomBorder"
          :style="{ transform:'translateX('+translateX+'px)',width:navItemWidth+'px'}"></span>
        <li
          class="itembox px-25 fs-15 lh-58" :ref="navItem"
          v-for="(item,index) in getMenus"
          @click="onNavItem(index,$event)"
          :key="index"
          >
          <span :class="['navItem d-inline-block px-5',actNavItem==index?'actNavItem':'']">{{item.name}}</span>
        </li>
      </ul>
    </div>
    <div class="header-right pr-10">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link d-flex items-center">
          <img src="https://picsum.photos/id/69/50/50" alt="avatar" />
          <span class="ml-5">{{userAccount}}</span>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <!-- <el-dropdown-item>个人中心</el-dropdown-item> -->
            <el-dropdown-item command="out">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

  </div>
</template>

<script setup>
import {ref,onMounted,computed,watch} from "vue";
import {routes} from '@/router/index';
import {useRoute, useRouter} from 'vue-router';
import {_getStorage,_removeStorage,_saveStorage} from '@/utils/localStorage';
import {useMapMutations} from "@/store/store-hooks/useMapMutations.js"
const actNavItem = ref(0);
const translateX = ref(0);
const navItemWidth = ref(34);
let navItemRef = ref([]);
const router = useRouter();
const route = useRoute();
const navItem = (el) => {
  navItemRef.value.push(el);
};
const storeMutations = useMapMutations('menus', ['setMenusIndex']);
const getMenus = computed(() => {
  let menus=[]
  // return ['首页', '商品管理', '运行管理', '分销拓客', '订单管理','系统管理'];
  routes.forEach((item) => {
    if (item.isMenu) {
      let temp={
        name:item.meta&&item.meta.title,
        childPath:[]
      }
      if(item.children){
        item.children.forEach((sub) => {
          if(sub.meta&&sub.meta.title){
            temp.childPath.push(sub.path?item.path+'/'+sub.path:item.path)
          }
        });
      }else{
        temp.childPath.push(item.path)
      }
      menus.push(temp);
    }
  });
  return menus
});
const userAccount=computed(()=>{
  return _getStorage('info')?.account||''
})
const handleCommand=(val)=>{
  if(val=='out'){
    _removeStorage('info');
    router.push('/login')
  }
}
watch(() => route.path, (value) => {
  if (value) {
    initHeaderNav()
  }
});
function initNav(index) {
  var index = index || 0;
  let offsetLeft = navItemRef.value && navItemRef.value[index].offsetLeft;
  let pWidth = navItemRef.value && navItemRef.value[index].clientWidth;
  translateX.value = offsetLeft + (pWidth - navItemWidth.value) / 2;
}
const initHeaderNav = () => {
  let index = getMenus.value.findIndex(item => item.childPath.includes(route.path));
  actNavItem.value = index > -1 ? index : 0;
  initNav(index > -1 ? index : 0);
  storeMutations.setMenusIndex.value(index > -1 ? index : 0);
};
const onNavItem = (index, data) => {
  if (route.path != getMenus.value[index]['childPath'][0]) {
    router.push({
      path: getMenus.value[index]['childPath'][0]
    });
  }
};
onMounted(() => {
  initHeaderNav();
})
</script>

<style lang="scss" scoped>
.header{
  height:70px;
  color:#333;
  background:#fff;
  .header-left{
    line-height: 70px;
    .logoBox{
      width:200px;
      .logoImg{
        width: 60px;
      }
    }
    .navBox {
      white-space: nowrap;
      flex: 1;
      .itembox {
        cursor: pointer;
        &:hover {
          color: var(--el-color-primary);
        }
        .navItem {
          padding: 0 5px;
          display: inline-block;
        }

        .actNavItem {
          
        }
      }
      .bottomBorder {
        position: absolute;
        height: 3px;
        width: 90px;
        background: var(--el-color-primary);
        bottom: 0px;
        transform: translateX(0px);
        transition: transform 0.15s ease-in-out;
      }
    }
  }
}
</style>